/* 
 * 学习目标： useEffect常见的两个坑点
  1. useEffect的依赖项要先声明后使用
  2. useEffect的执行顺序，由书写顺序决定。 推荐👍：先挂载时、后更新时。
*/

import React, { useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('');

  useEffect(() => {
    console.log('挂载时执行');
  }, []);

  useEffect(() => {
    console.log('更新时执行');
  }, [count]); // componentDidMount he DidUpdate都会执行

  return (
    <div>
      <button onClick={() => setMsg(msg + '!')}>点我修改Msg</button>
      <button onClick={() => setCount(count + 1)}>点我count+1</button>
    </div>
  );
}
